<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page import="java.util.Calendar" %>
<% String title = "信息综合系统"; %>
<%@ include file="/WEB-INF/jsp/header.jsp" %>
<title><%=title %>-好伙伴管理</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-itunes-app" content="app-id=429849944"/>
<meta name="apple-touch-fullscreen" content="no"/>
<meta content="telephone=no" name="format-detection"/>
<meta name="apple-mobile-web-app-capable" content="no"/>
</head>

<body class="fixed-top" style="background: #fff;">

<div class="container-fluid">
  <div class="row-fluid">
      <div class="span12">
          <ul class="breadcrumb" style="padding-bottom : 12px;background: #fff;">
              <li><a href="${pageContext.request.contextPath}/user/index.do">
					<i class="icon-angle-left"></i>
					<i class="icon-angle-left"></i> &nbsp;&nbsp;
	                 	首页控制台
				  </a>
                  <span class="divider">/</span></li>
              <li class="active">好伙伴管理</li>
              <li class="pull-right search-wrap" >
                  <button onclick="toggleCondi();" 
					class="btn dropdown-toggle" data-toggle="dropdown">
					<span id="but_text">隐藏筛选区域</span> 
					<i id="toggleCondi_i" class="icon-angle-up"></i>
				</button>
                  &nbsp;&nbsp;
                  <div class="btn-group pull-right" >
            <button class="btn dropdown-toggle" data-toggle="dropdown">更多 <i class="icon-angle-down"></i>
            </button>
            <ul class="dropdown-menu pull-right">
                <li><a href="${pageContext.request.contextPath}/client/download.do">下载已筛选的记录</a></li>
                <li><a href="#" onclick="openUpload('好伙伴');">Excel批量上传N条</a></li>
                <li><a href="#" onclick="showOpen('','新增');">页面新增一条</a></li>
            </ul>
        	</div>
      </li>
      </ul>
  </div>
</div>

  <div class="widget" >
      <div class="purple">
      <!-- 查询条件 -->
      <div class="row-fluid" >
          <div class="clearfix" >
          	<form action = "${pageContext.request.contextPath }/client/selectClientList.do" 
          	       id = "filterForm" method="post">
              <input type="text" class="span2" id="clientId" name="clientDTO.id" placeholder="请填写ID" />

              <input type="text" class="span2 typeahead" id="name" name="clientDTO.name" placeholder="请填写姓名" data-provide="typeahead"
                     data-items="4"/>
              <input type="text" class="span2 typeahead" id="telephone" name="clientDTO.telephone" placeholder="请填写手机号" data-provide="typeahead"
                     data-items="4"/>
              <input type="text" class="span2 typeahead" id="terminalCollection" name="clientDTO.terminalCollection" placeholder="请填写入货乙方" data-provide="typeahead"
                     data-items="4"/>
               <input type="text" class="span2 typeahead" id="openid" name="openid" placeholder="请填写openid" data-provide="typeahead"
                     data-items="4"/>  
               <br>   
              <select id="province" size="1" name="clientDTO.province">
                  <option value="" >请选择省份</option>
                  <c:forEach items="${condiMap.shengfen}" var="shenfen">
                      <option value="${shenfen}">${shenfen}</option>
                  </c:forEach>
              </select>
              <select id="city" size="1" name="clientDTO.city"
                  class="input-medium m-wrap">
                  <option value="" >请选择地市</option>
                  <c:forEach items="${citys}" var="city"
                      varStatus="status">
                      <option value="${city}">${city}</option>
                  </c:forEach>
              </select>
              <select id="county" size="1" name="clientDTO.country"
                  class="input-medium m-wrap">
                  <option value="" >请选择区县</option>
                  <c:forEach items="${countrys}" var="country">
                      <option value="${country}">${country}</option>
                  </c:forEach>
              </select>  
              
              <select id="type" size="1" name="clientDTO.type"
                  class="input-medium m-wrap">
                  <option value="">请选择用户类型</option>
                  <option value="1" >客户</option>
                  <option value="2" >代表</option>
              </select>            

              <input type="button" id="seach" name="seach" value="查询" class="btn  btn-primary"
                     style="margin-bottom: 10px;"
                     onclick="query(pNumber, pSize);"/>
              <input type="reset" id="reset" name="reset" value="重置该页面" class="btn  btn-primary"
               style="margin-bottom: 10px;" onclick="resetf();"/>
         	</form>
         </div>
     </div>
           
           <div id="errorInfoDiv" hidden="hidden">
			<table class="table table-striped table-hover table-bordered" style="font-size:11px;color:red;width:750px;margin:12px;">
			<thead>
				<tr>
					<td><b>出错行号</b></td>
					<td><b>出错标题</b></td>
					<td style="color:#479DA4;"><b>参考标准提示</b></td>
							<td><b>错误字段</b></td>
						</tr>
					</thead>
					<tbody id="error-body"></tbody>
				</table>
			</div>
          
          <!-- 新增、更新 -->
           <div id="form_div" hidden>
           	   <div class="modal-body" style="height: 90%">
          	<form action="${pageContext.request.contextPath }/client/saveOrUpdate.do" method="post" id="submitForm">
               <input type="text" class="span2" id="clientIdU" name="clientDTO.id" placeholder="请填写ID" style="display:none;"/>
                  <select id="provinceU" size="1" name="clientDTO.province">
                      <option value="" >请选择省份</option>
                      <c:forEach items="${condiMap.shengfen}" var="shenfen">
                          <option value="${shenfen}">${shenfen}</option>
                      </c:forEach>
                  </select>
                  <select id="cityU" size="1" name="clientDTO.city"
                      class="input-medium m-wrap">
                      <option value="" >请选择地市</option>
                      <c:forEach items="${citys}" var="city"
                          varStatus="status">
                          <option value="${city}">${city}</option>
                      </c:forEach>
                  </select>
                  <select id="countyU" size="1" name="clientDTO.country"
                      class="input-medium m-wrap">
                      <option value="" >请选择区县</option>
                      <c:forEach items="${countrys}" var="country">
                          <option value="${country}">${country}</option>
                      </c:forEach>
                  </select>  
                  <br/>
                  <span style="color:red;">*</span>
                  <select id="typeU" size="1" name="clientDTO.type" 
                      class="input-medium m-wrap noNull">
                      <option value="">请选择用户类型</option>
                      <option value="客户" >客户</option>
                      <option value="代表" >代表</option>
                      <option value="内部人员" >内部人员</option>
                  </select>  
                  <br/>
                  <span style="color:red;">*</span>
               <input type="text" class="span1 typeahead noNull" id="nameU" name="clientDTO.name" placeholder="填写姓名" data-provide="typeahead"
                      data-items="4"/>
               <span style="color:red;">*</span>
               <input type="text" class="span2 typeahead noNull" id="telephoneU" name="clientDTO.telephone" placeholder="请填写手机号" data-provide="typeahead"
                      data-items="4"/>
               <span style="color:red;">*</span>
               <input type="text" class="span2 typeahead noNull" id="uuidU" name="clientDTO.uuid" placeholder="请填写身份证" data-provide="typeahead"
                      data-items="4"/>
                      
                      <br/>
               <input type="text" class="span2 typeahead" id="terminalCollectionU" placeholder="请填写入货乙方" data-provide="typeahead"
                         data-items="4"/>&nbsp;&nbsp;<i class="icon-plus" onclick="addTerminal();"></i>&nbsp;&nbsp;
                  <input type = "text" class="span3" id="terminalU" name="clientDTO.terminalCollection" placeholder="请填写入货乙方" readonly="readonly"/>
                  <input type="button" value="清空" class="btn btn-mini btn-info" id="clear" onclick="clearTerminalU();">
              </form>
          </div>
      </div>
      
      <!-- 文件上传 -->
      <div id="uploadFileForm" hidden>
          <div class="modal-body" >
               <form action="${pageContext.request.contextPath}/client/upload.do"
				method="post" id="uploadForm" enctype="multipart/form-data">
					点击该按钮选择文件:<input type="file" name="excelFile" multiple="multiple"
						class="input-medium" id="file"><br/>
		 		</form>
          </div>
      </div>

		<div class="row-fluid">
            	<div class="span12">
                <!-- BEGIN ALERTS PORTLET-->
          <div class="widget blue">
              <div class="widget-title">
                  <h4><i class="icon-reorder"></i>
                      <a href="javascript:;" id="getProp" style ="color:white;margin-left:0px;">复制</a>
                     </h4>
				<span class="tools">
					<a href="javascript:;" class="icon-chevron-down"></a>
				</span>
                 </div>
                 <div class="widget-body" style="overflow:auto">
               <div class="pageBottom" style="text-align:center;">
                   <input type="hidden" id="page-size" value="0"/>
                   <div id="callBackPager" class="paging_bootstrap pagination"></div> 
               </div>
              	<table class="table table-striped table-hover table-bordered" width="640px;"
                 		style="table-layout:fixed">
                      <thead>
                      <tr>
                          <th style="width:15px;"><input type="checkbox" name="choiceAll" value="all" onclick="allAndNotAll(this,'client');" id ="allAndNotAll"/></th>
                              <th width="20px">id</th>
                              <th width="260px">身份证</th>
                              <th width="60px">用户类型</th>
	                          <th width="60px">姓名</th>
	                          <th width="80px">手机号</th>
	                          <th width="80px">省份</th>
	                          <th width="80px">地市</th>
	                          <th width="80px">区县</th>
	                          <th width="220px">入货乙方</th>
                              <th width="130px">修改时间</th>
                              <th width="240px">openid</th>
                      </tr>
                      </thead>
                      <tbody id="distribute-body">
              		</tbody>
                  </table>
              </div>
          </div>
      	</div>
  	</div>
  	
  </div>
  </div>
</div>

<script src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.nicescroll.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/js/fullcalendar.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.easy-pie-chart.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.sparkline.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/Chart.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.scrollTo.min.js"></script>
<script src="${pageContext.request.contextPath}/js/common-scripts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/layer/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-multiselect.css" type="text/css"/>
<script src="${pageContext.request.contextPath}/js/bootstrap-typeahead.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/extendPagination.js"></script>
<!-- 复制 -->
<script src="${pageContext.request.contextPath}/js/jquery.zclip.min.js" type="text/javascript" ></script>

<script>
	$(document).ready(function () {
		setTimeout("selectMoreItem('province','请选择省份','110px');",10);
		setTimeout("selectMoreItem('type','请选择用户类型','140px');",10);
		setTimeout("selectMoreItem('city','请选择地市','110px');",10);
		setTimeout("selectMoreItem('county','请选择区县','110px');",10);
   });
</script>

<!-- 查询list -->
<script>
    function query(pageNumber, pageSize) {
    	var url = "${pageContext.request.contextPath }/client/selectForList.do?clientDTO.pageNumber="+pageNumber+"&clientDTO.pageSize="+pageSize;
    	var params = $("#filterForm").serialize();
    	queryList(url,params);
    }
    //动态创建table
    function createTable(currPage, limit, total, items) {
        var html = [], showNum = limit;
        if (total - (currPage * limit) < 0) showNum = total - ((currPage - 1) * limit);
        for (var i = 0; i < showNum; i++) {
            html.push("<tr ondblclick=\"showOpen('"+items[i].id+"','修改')\" >");
            html.push('<td><input type="checkbox" name="choice" value="'+items[i].id+'"/></td>');
            html.push('<td>' + formatData(items[i].id) + '</td>');
            html.push('<td>' + formatData(items[i].uuid) + '</td>');
            html.push('<td>' + formatData(items[i].type) + '</td>');
            html.push('<td>' + formatData(items[i].name) + '</td>');
            html.push('<td>' + formatData(items[i].telephone) + '</td>');
            html.push('<td>' + formatData(items[i].province) + '</td>');
            html.push('<td>' + formatData(items[i].city) + '</td>');
            html.push('<td>' + formatData(items[i].country) + '</td>');
            html.push('<td>' + formatData(items[i].terminalCollection) + '</td>');
            html.push('<td>' + formatData(items[i].mtime) + '</td>');
            html.push('<td>' + formatData(items[i].openid) + '</td>');
            html.push('</tr>');
        }
        var mainObj = $('#distribute-body');
        mainObj.empty();
        mainObj.html(html.join(''));
    };
</script>

<!-- 新增、更新 -->
<script>
    var htmls = $("#form_div").html();
    var ret = null;
    var open = false;
    function showOpen(id,type) {
    	$("#form_div").remove();
        layer.open({
            title: [type+'<span style="color:red;font-size:12px;margin-left:10px;">*表示该项必填</span>', 'font-size:18px;'],
            type:1,
            content: htmls, //这里content是一个普通的String
            btn: ['确认', '取消'],
            yes: function(index, layero){
            	var ret = checkNull("submitForm");
				if (ret == "false") {
					open = true;
					return open;
				}
				//一点击确认就关闭对话框
	         	layer.closeAll();
	         	//加载等待框
	         	layer.load(2);
	         	
            	var action ="";
                if("新增"==type){
                	action = "${pageContext.request.contextPath }/client/saveOrUpdate.do?flag=N";
                }else if("修改"==type){
                	action = "${pageContext.request.contextPath }/client/saveOrUpdate.do?flag=E";
                }
                var params = $("#submitForm").serialize();
				sendRequest(action, params, function(result) {
					var code = result.code;
					if (code == -2) { //excel校验不通过
						open = true;
						errorInfo(result.msg);
					} else if (code == -1) { // 有错误
						layer.alert(result.msg);
					} else if (code > 0) {
						//查询方法里有关闭load(2)的方法
						query(pNumber, pSize);
						layer.alert(result.msg);
					}
				});
				return open;
            }
            ,cancel: function(){
            	layer.closeAll('loading');
            }
            ,area: ['800px', '500px']
        });
        
        //修改时，异步回显数据
        if("修改"==type){
            $.ajax({
                type: "POST",
                async:false,//同步
                url: "${pageContext.request.contextPath }/client/selectClientByID.do?t=" + Math.random(),
                data: {clientId:id},
                dataType: "json",
                success: function (result) {
                	if(result.code==-3){	//登录用户失效
                   		layer.alert(result.message+'</br>点击前往登录页面:'+'<a href="${pageContext.request.contextPath}/login.jsp">登录页面</a>');
                   	}else {
                    	ret = result;
                    	$("#clientIdU").val(ret.id);  //动态赋值ID
                        $("#nameU").val(ret.name);
                        $("#provinceU").val(ret.province);
                        $("#cityU").val(ret.city);
                        $("#countyU").val(ret.country);
                        $("#telephoneU").val(ret.telephone);
                        $("#typeU").val(ret.type);
                        $("#terminalU").val(ret.terminalCollection);
                        
                        $("#provinceU").multiselect({includeSelectAllOption:true,nonSelectedText: '请选择省份', enableFiltering: true, maxHeight: 300, buttonWidth: '100px'});
                        $('#cityU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择地市',enableFiltering: true, maxHeight: 300,buttonWidth: '100px'});
                        $('#countyU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择区县',enableFiltering: true, maxHeight: 300,buttonWidth: '100px'});
                   	}
                },
                error: function (e) {
                    layer.closeAll('loading');
                    layer.msg("操作失败！");
                }
            });
        } else {
        	//新增、更新界面的下拉多选过滤 
         	var url = "${pageContext.request.contextPath }/register/nothing.do";
    		sendRequest(url,null,function(result) {
    			var code = result.code;
    			var ret = result.msg;
    			if (code > 0) {
    				 //新增、更新界面的下拉多选过滤 
    				$("#provinceU").multiselect({includeSelectAllOption:true,nonSelectedText: '请选择省份', enableFiltering: true, maxHeight: 300, buttonWidth: '100px'});
    	            $('#cityU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择地市',enableFiltering: true, maxHeight: 300,buttonWidth: '100px'});
    	            $('#countyU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择区县',enableFiltering: true, maxHeight: 300,buttonWidth: '100px'});
    			}
    		});
        }
        var terminal = ${condiMap.terminal};
        $('#terminalCollectionU').typeahead({source: terminal});
    }
</script>  

<!-- other -->
<script>    
    //添加入货乙方
    function addTerminal(){
        var terminal = $("#terminalCollectionU").val();
        if(terminal.length>0 && terminal != "" && terminal != undefined){
            var terminals = $("#terminalU").val();
            if(terminals.length>0){
                if(terminals.indexOf(terminal)!=-1){
                    layer.alert(terminal+"<br/>已经存在，请重新输入！");
                    $("#terminalCollectionU").val("");
                }else{
                    $("#terminalU").val(terminals+","+terminal);
                }
            }else{
                $("#terminalU").val(terminal);
            }
        }else{
            layer.alert("不能添加空入货乙方！");
        }
    }
    //清除入伙乙方
    function clearTerminalU(){
    	$("#terminalU").val("");
    }
</script>
<script src="${pageContext.request.contextPath}/javascript/httpService.js"></script>
</body>
</html>